<template>
  <div class="signUp-page">
    <div class="lg-container">
      <div class="signUp-box shadow-block">
        <h1 class="page-title">注册</h1>
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          class="signUp-form"
        >
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              class="common-input"
              type="text"
              placeholder="用户名"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item prop="nickname">
            <el-input
              v-model="formData.nickname"
              class="common-input"
              type="text"
              placeholder="昵称"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formData.password"
              class="common-input"
              type="password"
              placeholder="密码"
              autocomplete="off"
              show-password-on="click"
              @keyup.enter="singUp"
            />
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="formData.confirmPassword"
              class="common-input"
              type="password"
              placeholder="确认密码"
              autocomplete="off"
              show-password-on="click"
              @keyup.enter="singUp"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formData.email"
              class="common-input"
              name="username"
              type="text"
              value=" "
              placeholder="邮箱（选填）"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item class="footer">
            <el-button :loading="isSignUpLoading" type="primary" @click="singUp"
              >确定注册</el-button
            >
            <el-button @click="goToLogIn">直接登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SignUp',
  data() {
    return {
      formData: {
        username: '',
        nickname: '',
        password: '',
        confirmPassword: '',
        email: '',
        avatar: 'https://blog-la.oss-cn-hangzhou.aliyuncs.com/blog/assets/default.jpg'
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
        ],
        password: {
          required: true,
          trigger: ['blur', 'input'],
          validator: (_, value) => {
            return new Promise((resolve, reject) => {
              if (!value.length) {
                reject(Error('请输入密码'))
              } else if (value.length > 24 || value.length < 6) {
                reject(Error('密码为6-24位'))
              } else {
                resolve()
              }
            })
          }
        },
        confirmPassword: {
          required: true,
          trigger: ['blur', 'input'],
          validator: (_, value) => {
            return new Promise((resolve, reject) => {
              if (!value.length) {
                reject(Error('请输入确认密码'))
              } else if (value !== this.formData.password) {
                reject(Error('两次密码不一致'))
              } else {
                resolve()
              }
            })
          }
        }
      },
      isSignUpLoading: false,
    }
  },
  methods: {
    async requestSingUp() {
      this.isSignUpLoading = true
      try {
        await this.$API.user.register(this.formData)
        this.$toast.success('注册成功,请登录')
        this.isSignUpLoading = false
        this.goToLogIn()
      } catch (error) {
        this.isSignUpLoading = false
      }
    },

    singUp() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.requestSingUp()
        } else {
          this.$toast.warning('请填写完整信息')
        }
      })
    },

    goToLogIn() {
      this.$router.push('/signIn')
    },
  },
}
</script>

<style lang="less">
.signUp-page {
  height: 100%;
  .signUp-box {
    background-color: #fff;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .page-title {
      font-size: 32px;
      color: @colorTextTitle;
      margin-bottom: 50px;
    }
    .signUp-form {
      width: 500px;

      .forget-btn {
        display: block;
        color: @colorText-2;
      }

      @media screen and (max-width: @breakpoints-sm) {
        width: 85%;
      }
    }
  }
}
</style>
